<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            transition: .6s;
        }

        body {
            background: rgb(60, 50, 120);
            display: flex;
            justify-content: center;
        }

        .a {
            position: relative;
            top: 100px;
        }

        .a:hover {
            transform: skew(-55deg, 10deg);
        }

        .a:hover .b {
            background-image: url("image/003.jpg");
        }

        .a:hover .e {
            background-image: url("image/002.jpg");
        }

        .a:hover .f {
            background-image: url("image/004.jpg");
        }

        .a:hover .c {
            transform: skew(55deg) translateX(-15px);
            transform-origin: top;
        }

        .a:hover .d::after {
            transform: translateY(-200px) translateX(180px);
        }

        .a:hover .d {
            bottom: 40px;
            transform: skew(45deg, 10deg) translateX(480px) translateY(-50px);
        }

        .a:hover .e {
            transform: translateX(65px);
        }

        .a:hover .f {
            transform: skew(55deg) translateX(164px);
            font-size: 90px;
            color: khaki;
            line-height: 120px;
            text-align: left;
        }

        .b {
            width: 400px;
            height: 110px;
            background: #fff;
        }

        .c {
            font-size: 60px;
            display: block;
            color: rgb(170, 200, 200);
        }

        .d,
        .d::after {
            width: 100px;
            height: 100px;
            background: rgb(230, 70, 150);
            border-radius: 50%;
            position: absolute;
            z-index: 99;
            bottom: 10px;
        }

        .d::after {
            content: '';
            translate: .7s;
        }

        .e {
            width: 400px;
            height: 235px;
            background: rgb(100, 30, 190);
        }

        .f {
            width: 400px;
            height: 138px;
            background: rgb(230, 70, 150);
            display: block;
            text-align: center;
            font-size: 26px;
            line-height: 70px;
        }
    </style>
</head>

<body>
    <div class="a">
        <div class="b"></div>
        <span class="c">I/LOVE/YOU</span>
        <div class="d"></div>
        <div class="e"></div>
        <a href="#" class="f">BABY</a>
    </div>
</body>

</html>